<template>
  <div class="container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>问题调整</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="box-card">
      <div class="show">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input class="input" v-model="form.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input class="input" v-model="form.description" disabled></el-input>
          </el-form-item>
        </el-form>
        <!-- 显示已有的 -->
        <el-form ref="form" :model="form" :visible.sync="listvisible" label-width="80px">
          <!--      <div>{{ title }}</div>-->
          <!-- 遍历已创建的选项渲染 -->
          <div class="item" v-for="(item, index) in qshowItem" :key="index">
            <el-form-item :label="(index+1)+''">
              <div class="item_title">
                <span>、{{ typeMap[item.type] }}: </span>
                <span v-text="item.title"></span>
                <!--            <el-button type="primary">逻辑设置</el-button>-->
              </div>
              <!-- 单项填空 -->
              <div v-if="item.type==='input'">
                <el-input class="disabled" placeholder="禁止输入" disabled type="textarea" :rows="2"></el-input>
              </div>
              <!-- 单选 -->
              <div v-else-if="item.type==='radio'">
                <div class="warp" v-if="item.options!==''">
                  <el-radio :label="1+'、'"></el-radio>
                  <el-input class="input" v-model="item.options"></el-input>
                </div>
                <div class="warp" v-if="item.options2!==null">
                  <el-radio :label="2+'、'"></el-radio>
                  <el-input class="input" v-model="item.options2"></el-input>
                </div>
                <div class="warp" v-if="item.options3!==null">
                  <el-radio :label="3+'、'"></el-radio>
                  <el-input class="input" v-model="item.options3"></el-input>
                </div>
                <div class="warp" v-if="item.options4!==null">
                  <el-radio :label="4+'、'"></el-radio>
                  <el-input class="input" v-model="item.options4"></el-input>
                </div>
                <!--            <div class="warp" v-for="(elm, i) in item.textList" :key="i">-->
                <!--              <el-radio :label="(i+1)+'、'"></el-radio>-->
                <!--              <el-input class="input" v-model="item.textList[i]" ></el-input>-->
                <!--            </div>-->
              </div>

              <!-- 多选 -->
              <div v-else-if="item.type==='checkbox'">
                <div class="warp" v-if="item.options!==null">
                  <el-checkbox :label="1+'、'"></el-checkbox>
                  <el-input class="input" v-model="item.options"></el-input>
                </div>
                <div class="warp" v-if="item.options2!==null">
                  <el-checkbox :label="2+'、'"></el-checkbox>
                  <el-input class="input" v-model="item.options2"></el-input>
                </div>
                <div class="warp" v-if="item.options3!==null">
                  <el-checkbox :label="3+'、'"></el-checkbox>
                  <el-input class="input" v-model="item.options3"></el-input>
                </div>
                <div class="warp" v-if="item.options4!==null">
                  <el-checkbox :label="4+'、'"></el-checkbox>
                  <el-input class="input" v-model="item.options4"></el-input>
                </div>
              </div>

              <!--              &lt;!&ndash; 选择填空 &ndash;&gt;-->
              <!--              <div v-else-if="item.type === 'select'">-->
              <!--                <el-select v-model="value" placeholder="请选择">-->
              <!--                  <el-option-->
              <!--                    v-for="(elm, i) in item.textList" :key="i"-->
              <!--                    :label="item.textList[i]"-->
              <!--                    :value="i+''">-->
              <!--                  </el-option>-->
              <!--                </el-select>-->
              <!--              </div>-->
              <!-- 上移、下移、删除 -->
              <div style="margin-top: 10px">
                <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
                <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
                <el-button @click="handleItem('del', item)">删除</el-button>
                <el-button @click="edit(item, index)">编辑</el-button>
                <el-button>逻辑设置</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!-- 批量创建的 -->
        <el-form ref="form" :model="form" :visible.sync="clistvisible" label-width="80px">
          <!--      <div>{{ title }}</div>-->
          <!-- 遍历已创建的选项渲染 -->
          <div class="item" v-for="(item, index) in cshowItem" :key="index">
            <el-form-item :label="(index+1)+''">
              <div class="item_title">
                <span>、{{ typeMap[item.type] }}: </span>
                <span v-text="item.title"></span>
                <!--            <el-button type="primary">逻辑设置</el-button>-->
              </div>
              <!-- 单项填空 -->
              <div v-if="item.type==='input'">
                <el-input class="disabled" placeholder="禁止输入" disabled type="textarea" :rows="2"></el-input>
              </div>
              <!-- 单选 -->
              <div v-else-if="item.type==='radio'">
                <div class="warp" v-if="item.option1!==''">
                  <el-radio :label="1+'、'"></el-radio>
                  <el-input class="input" v-model="item.option1"></el-input>
                </div>
                <div class="warp" v-if="item.option2!==null">
                  <el-radio :label="2+'、'"></el-radio>
                  <el-input class="input" v-model="item.option2"></el-input>
                </div>
                <div class="warp" v-if="item.option3!==null">
                  <el-radio :label="3+'、'"></el-radio>
                  <el-input class="input" v-model="item.option3"></el-input>
                </div>
                <div class="warp" v-if="item.option4!==null">
                  <el-radio :label="4+'、'"></el-radio>
                  <el-input class="input" v-model="item.option4"></el-input>
                </div>
                <!--            <div class="warp" v-for="(elm, i) in item.textList" :key="i">-->
                <!--              <el-radio :label="(i+1)+'、'"></el-radio>-->
                <!--              <el-input class="input" v-model="item.textList[i]" ></el-input>-->
                <!--            </div>-->
              </div>
              <!-- 上移、下移、删除 -->
              <div style="margin-top: 10px">
                <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
                <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
                <el-button @click="handleItem('del', item)">删除</el-button>
                <el-button @click="edit(item, index)">编辑</el-button>
                <el-button>逻辑设置</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
        <!-- 新创建的 -->
        <el-form ref="form" :model="form" label-width="80px">
          <div class="item" v-for="(item, index) in form.itemList" :key="index">
            <el-form-item :label="(index+len)+''">
              <div class="item_title">
                <span>、{{ typeMap[item.type] }}: </span>
                <span v-text="item.title"></span>
              </div>
              <!-- 单项填空 -->
              <div v-if="item.type==='input'">
                <el-input class="disabled" placeholder="禁止输入" disabled></el-input>
              </div>
              <!-- 单选 -->
              <div v-else-if="item.type==='radio'">
                <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                  <el-radio :label="(1+i)+'、'"></el-radio>
                  <el-input class="input" v-model="item.textList[i]"></el-input>
                </div>
              </div>

              <!-- 多选 -->
              <div v-else-if="item.type==='checkbox'">
                <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                  <el-checkbox :label="(i+1)+'、'"></el-checkbox>
                  <el-input class="input" v-model="item.textList[i]"></el-input>
                </div>
              </div>
              <!-- 上移、下移、删除 -->
              <div style="margin-top: 10px">
                <el-button @click="handleItem('up', item)" v-if="index!=0">上移</el-button>
                <el-button @click="handleItem('down', item)" v-if="index!=form.itemList.length-1">下移</el-button>
                <el-button @click="handleItem('del', item)">删除</el-button>
                <el-button @click="edit(item, index)">编辑</el-button>
                <el-button @click="showSetting = true">逻辑设置</el-button>
                <el-dialog
                  title="逻辑设置"
                  :visible.sync="showSetting"
                  width="50%"
                >
                  <el-select v-model="setting.value" placeholder="请选择设置逻辑的选项">
                    <el-option :value="'选项'+[index+1]+ ' : '+[item]" v-for="(item,index) in item.textList">
                      选项{{ index + 1 }}:{{ item }}
                    </el-option>
                  </el-select>
                  <br/>
                  <br/>
                  <span>请选择想要显示的题目</span>
                  <br/>
                  <el-checkbox-group v-model="setting.showList">
                    <el-checkbox v-for="(item) in form.itemList.length" :label="'第'+[item]+'题'">第{{ item }}题
                    </el-checkbox>
                    <br/>
                  </el-checkbox-group>
                  <span slot="footer" class="dialog-footer">
               <el-button @click="showSetting = false">取 消</el-button>
                <el-button type="primary" @click="showSetting = false">确 定</el-button>
              </span>
                </el-dialog>
              </div>
            </el-form-item>
          </div>

          <!-- 添加选项 -->
          <el-form-item>
            <el-button @click="add('radio')">单选</el-button>
            <el-button @click="add('checkbox')">多选</el-button>
            <el-button @click="add('input')">单项填空</el-button>
            <!--        <el-button @click="add('select')">选择填空</el-button>
                    <el-button @click="add('matrix')">矩阵填空</el-button>-->
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="show">已有问题</el-button>
            <el-button type="primary" @click="onSubmit">立即发布</el-button>
            <el-button type="primary" @click="preview">预览问卷</el-button>
            <el-button type="primary" @click="answer">回答问卷</el-button>
            <el-button type="primary" @click="showSetting = true">逻辑设置</el-button>
            <el-button type="success" @click="quesBankVisible = true">批量添加题目</el-button>
          </el-form-item>
          <!--      </div>-->
          <!--      批量添加问题-->
          <el-dialog
            title="批量添加问题"
            :visible.sync="quesBankVisible"
            width="70%">
            <el-table :data="quesBankList" highlight-current-row @selection-change="handleSelectionChange"
                      @row-click="onRowClick" border stripe>
              <el-table-column label="#" type="selection">
              </el-table-column>
              <el-table-column label="#" type="index">
              </el-table-column>
              <el-table-column label="问题描述" prop="title">
              </el-table-column>
              <el-table-column label="问题类型" prop="cType">
              </el-table-column>
              <el-table-column label="选项A" prop="option1">
              </el-table-column>
              <el-table-column label="选项B" prop="option2">
              </el-table-column>
              <el-table-column label="选项C" prop="option3">
              </el-table-column>
              <el-table-column label="选项D" prop="option4">
              </el-table-column>
            </el-table>
            <!--        <el-pagination-->
            <!--          @size-change="AnhandleSizeChange"-->
            <!--          @current-change="AnhandleCurrentChange"-->
            <!--          :current-page="queryInfoForReplier.pagenum"-->
            <!--          :page-sizes="[1, 2, 5, 10]"-->
            <!--          :page-size="queryInfoForReplier.pagesize"-->
            <!--          layout="total, sizes, prev, pager, next, jumper"-->
            <!--          :total="answertotal">-->
            <!--        </el-pagination>-->
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="quesBankVisible = false">取 消</el-button>
                <el-button type="primary" @click="addQuesFromBank">确 认</el-button>
            </span>
          </el-dialog>
          <!-- 添加选项弹出框 -->
          <div class="additem">
            <el-dialog
              :title="typeMap[questItem.type]"
              :visible.sync="showItem"
              width="50%">
              <el-form-item label="标题">
                <el-input v-model="itemTitle"></el-input>
              </el-form-item>
              <el-form-item label="添加选项" v-show="questItem.type != 'input'">
                <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>
              </el-form-item>
              <el-form-item label="选项" v-for="(text, i) in itemText" :key="i" v-show="questItem.type != 'input'">
                <el-input v-model="itemText[i]"></el-input>
              </el-form-item>
              <span slot="footer" class="dialog-footer">
            <el-button @click="clearItem">取 消</el-button>
                <!--             <el-button @click="getId">加入问卷</el-button>-->
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
            </el-dialog>
          </div>
        </el-form>
      </div>
    </el-card>
    <!--    逻辑设置弹窗-->
    <div class="addSetting">
      <el-dialog
        title="逻辑设置"
        :visible.sync="showSetting"
        width="50%"
      >
        <span style="margin-right: 20px">请选择设置逻辑的题目</span>
        <el-button>1</el-button>
        <el-button>2</el-button>
        <el-button>3</el-button>
        <div class="topSetting" style="margin-top: 20px">
          <el-select v-model="setting.value" placeholder="请选择设置逻辑的选项">
            <el-option :value="1" label="选项一">选项一</el-option>
            <el-option :value="2" label="选项二">选向二</el-option>
          </el-select>
        </div>
        <div class="rightSetting">
          <span style="display: block;margin: 20px">请选择要显示的题目</span>
          <el-checkbox-group v-model="setting.showList">
            <el-checkbox label="第二题">第二题</el-checkbox>
            <el-checkbox label="第三题">第三题</el-checkbox>
            <el-checkbox label="第四题">第四题</el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showSetting = false">取 消</el-button>
          <el-button type="primary" @click="showSetting = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>
<script>
// import previewQuestion from './previewQuestion'

export default {
  // components: {
  //   previewQuestion: previewQuestion
  // },
  updated () {
    window.Vue = this
    // console.log(this.form.itemList[0].textList.length)
  },
  created () {
    this.form.name = this.$route.query.title
    this.form.description = this.$route.query.description
    this.form.nid = this.$route.query.id
    this.nid = this.$route.query.id
    this.getId()
    this.quesBankList = this.Global.globalQuesBank
    for (let i = 0; i < this.quesBankList.length; i++) {
      if (this.quesBankList[i].type === 'selection') {
        // 给题库的数组 添加上中文类型名称
        this.quesBankList[i].cType = '选择题'
      } else if (this.quesBankList[i].type === 'description') {
        this.quesBankList[i].cType = '填写题'
      }
    }
    this.quesBankTotal = this.Global.globalQuesBank.length
  },
  data () {
    return {
      multipleSelection: [],
      quesBankTotal: '',
      quesBankList: [],
      quesBankVisible: false,
      value: '',
      matrixsNum: 1,
      //nid: 1,
      //num: 1,
      form: {
        itemList: [],
        description: '',
        name: '',
        date: '',
        nid: 1
      },
      setting: {
        value: '',
        showList: []
      },
      itemTitle: '',
      itemText: new Array(1),
      questItem: {}, // 新添加的
      qshowItem: {}, // 本来就有的
      cshowItem: {}, // 批量创建的
      len: 1,
      showItem: false,
      showSetting: false,
      typeMap: {
        radio: '单选',
        checkbox: '多选',
        input: '问答'
      },
      nnn: 1,
      listvisible: true,
      clistvisible: true,
      type: '',
      editIndex: '',
      num: 0
    }
  },
  watch: {
    showItem () {
      if (!this.showItem) {
        this.clearItem()
      }
    }
  },
  methods: {
    // 逻辑设置界面跳转
    answerQuestion () {
      this.$router.push('/NewQuestion')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onRowClick (row, event, column) {
      this.currentRowIndex = row.row_index
    },
    // 创建选项
    add (type) {
      this.questItem.type = type
      this.showItem = true
      this.type = type
    },
    // 增加/减少 子选项
    handleChange (val) {
      this.itemText.length = val
    },
    getId () {
      this.$http.get('/questionnaire/getId').then(({ data }) => {
        this.nnn = data.data
        console.log(data.data)
        console.log(this.nnn)
        if (this.nid === 666) {
          // console.log(this.nid)
          this.nid = this.nnn
          // console.log(this.nid)
        }
      })
    },
    // 确定将选项添加进列表中进行渲染
    determine () {
      console.log(this.nid)
      // if (this.nid === 666) {
      //   this.nid = this.nnn
      //   console.log(this.nid)
      // }
      if (this.questItem.type === 'input') {
        // 填空
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.form.itemList.push(this.questItem)
        }
        this.$http.post('/question/add', {
          title: this.questItem.title,
          naireId: this.nid,
          type: this.type
          // title: this.itemTitle,
          // naireId: nnn,
          // options: this.itemText[0],
          // options2: this.itemText[1],
          // options3: this.itemText[2],
          // options4: this.itemText[3]
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message.success('创建题目成功')
            // location.reload()
          } else {
            this.$message.error('创建题目失败')
          }
        })
        console.log('添加填空')
        this.clearItem()
      } else if (this.questItem.type === 'radio' || this.questItem.type === 'checkbox' || this.questItem.type === 'matrix' || this.questItem.type === 'select') {
        // 单选、多选、矩阵
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        for (var i = 0; i < this.itemText.length; i++) {
          if (this.itemText[i] === '' || this.itemText[i] === undefined) {
            this.$message('请完整输入每个选项内容')
            return
          }
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.questItem.textList = this.itemText
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.questItem.textList = this.itemText
          this.form.itemList.push(this.questItem)
        }
        this.$http.post('/question/add', {
          title: this.questItem.title,
          naireId: this.nid,
          options: this.questItem.textList[0],
          options2: this.questItem.textList[1],
          options3: this.questItem.textList[2],
          options4: this.questItem.textList[3],
          type: this.type
          // title: this.itemTitle,
          // naireId: nnn,
          // options: this.itemText[0],
          // options2: this.itemText[1],
          // options3: this.itemText[2],
          // options4: this.itemText[3]
        }).then(({ data }) => {
          if (data.code === 200) {
            this.$message.success('创建题目成功')
            // location.reload()
          } else {
            this.$message.error('创建题目失败')
          }
        })
        // console.log(this.nnn)
        this.clearItem()
      }
      this.clearItem()
    },
    // 编辑
    edit (item, editIndex) {
      this.editIndex = editIndex
      if (item.type !== 'input') {
        this.num = item.textList.length
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
        this.itemText = []
        this.itemText.push(...item.textList)
      } else {
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
      }
    },
    // 关闭弹窗，清空数据
    clearItem () {
      this.num = 1
      this.itemTitle = ''
      this.itemText = ['']
      this.questItem = {}
      this.showItem = false
    },
    // 判断上移、下移、删除
    handleItem (val, item) {
      switch (val) {
        case 'up':
          this.moveUp(item)
          break
        case 'down':
          this.moveDown(item)
          break
        case 'del':
          this.delItem(item)
          break
        default:
          throw new Error('该操作不存在！')
      }
    },
    // 上移
    moveUp (item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
      this.form.itemList.splice(index - 1, 0, item)
    },
    // 下移
    moveDown (item) {
      const index = this.form.itemList.indexOf(item)
      this.moveUp(this.form.itemList[index + 1])
    },
    // 删除
    delItem (item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
    },
    // 提交
    onSubmit () {
      if (this.form.name === '') {
        this.$message('请输入标题内容')
        return
      }
      if (this.form.itemList.length === 0) {
        this.$message('至少添加一个选项')
        return
      }
      // console.log(this.form)
      this.$router.push('../postQuestion')
    },
    answer () {
      this.$router.push({
        path: '/answerQuestion',
        query: {
          id: this.form.nid,
          title: this.form.name,
          description: this.form.description
        }
      })
    },
    preview () {
      this.$router.push({
        path: '/previewQuestion',
        query: {
          id: this.form.nid,
          title: this.form.name,
          description: this.form.description
        }
      })
    },
    show () {
      console.log(this.nid)
      this.$http.get(`/questionnaire/preview/${this.nid}`).then(({ data }) => {
        this.qshowItem = data.data
        this.len = this.qshowItem.length + 1
        console.log(data.data)
        console.log(this.form.itemList)
      })
      this.listvisible = true
    },
    addQuesFromBank () {
      // 这里将multipleSelection中的问题添加到该问卷下
      // 转换问题类型 方便对接  所有选择题都转为单选了
      for (let i = 0; i < this.multipleSelection.length; i++) {
        if (this.multipleSelection[i].type === 'selection') {
          this.multipleSelection[i].type = 'radio'
        } else if (this.multipleSelection[i].type === 'description') {
          this.multipleSelection[i].type = 'input'
        }
        this.$http.post('/question/add', {
          title: this.multipleSelection[i].title,
          naireId: this.nid,
          options: this.multipleSelection[i].option1,
          options2: this.multipleSelection[i].option2,
          options3: this.multipleSelection[i].option3,
          options4: this.multipleSelection[i].option4,
          type: this.multipleSelection[i].type
        }).then(({ data }) => {
          // this.num = this.num + 1
          // console.log(this.num)
        })
      }
      // console.log(this.num)
      // console.log(this.num)
      this.$message.success('批量添加' + this.multipleSelection.length + '道问题成功')
      this.cshowItem = this.multipleSelection
      this.len = this.len + this.cshowItem.length
      this.quesBankVisible = false
      this.clistvisible = true
    }
  }
}
</script>
<style lang="less" scoped>
.warp {
  display: flex;
  align-items: center;
}

.disabled {
  background: #F5F7FA;
  width: 250px;
}

.show {
  //background: rgba(209, 225, 246, 0.5);
  //background-repeat: repeat-y;
  //background-position: center top;
  //width: 800px;
}

.box-card {
  background: rgba(209, 225, 246, 0.5);
}

li {
  list-style: none;
}

.block {
  display: block;
}

.input {
  //-webkit-appearance: none;
  //background-color: #FFF;
  //background-image: none;
  //border-radius: 4px;
  //border: 1px solid #DCDFE6;
  //box-sizing: border-box;
  //color: #606266;
  //font-size: inherit;
  //height: 40px;
  width: 250px;
  //line-height: 40px;
  //outline: 0;
  //padding: 0 15px;
  //transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
  //margin: 10px 0 0;
}

.rightSetting {
  display: inline-block;
  width: 45%;
  height: 80px;
  padding: 10px;
}

.el-dialog__title {
  font-size: 35px !important;
  font-weight: 700;
}

.none {
  display: none;
}

.el-radio {
  color: #606266;
  cursor: pointer;
  margin-right: 0;
}
</style>
